<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>军事标绘</title>
    <link href="Cesium/Widgets/widgets.css" rel="stylesheet" />
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
      }

      #toolBar {
        position: absolute;
        left: 20px;
        top: 20px;
        z-index: 2;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <div id="toolBar">
      <button id="straightArrow">直线箭头</button>
      <button id="attackArrow">攻击箭头</button>
      <button id="pincerArrow">钳击箭头</button>
      <button id="clear">删除</button>
      <button id="save">保存</button>
      <button id="show">展示</button>
    </div>
  </body>

  <script src="Cesium/Cesium.js"></script>
  <script src="plugin/jquery.min.js"></script>
  <script src="plugin/drawArrow/plotUtil.js"></script>
  <script src="plugin/drawArrow/algorithm.js"></script>
  <script src="plugin/drawArrow/arrowClass.js"></script>
  <script src="plugin/drawArrow/drawPlot.js"></script>
  <script>
    var viewer = new Cesium.Viewer('map', {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      }),
      terrainProvider: new Cesium.CesiumTerrainProvider({
        url: 'http://data.marsgis.cn/terrain',
      }),
    })

    //var tileset = viewer.scene.primitives.add(
    //new Cesium.Cesium3DTileset({
    //		url: "http://yixun.tdtah.cn/MapCesium/ThreedFile/jianyu/jianyu_cesium.json",
    //	//		//url: "http://data.marsgis.cn/3dtiles/qx-dyt/tileset.json",
    //			maximumScreenSpaceError: 1,
    //		})
    //	);
    //	tileset.readyPromise.then(function (tileset) {
    //		var boundingSphere = tileset.boundingSphere;
    //		viewer.camera.flyToBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere
    //			.radius * 2));
    //		var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    //	var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    //	var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 70);
    //	var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    //	tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    //}).otherwise(function (error) {});

    arrow.disable()
    arrow.init(viewer)
    $('#straightArrow').click(function () {
      arrow.draw('straightArrow')
    })
    $('#attackArrow').click(function () {
      arrow.draw('attackArrow')
    })
    $('#pincerArrow').click(function () {
      arrow.draw('pincerArrow')
    })
    $('#clear').click(function () {
      arrow.clearOne()
    })
    $('#save').click(function () {
      arrow.saveData()
    })
    $('#show').click(function () {
      $.getJSON('data/arrow.json', function (jsonData) {
        arrow.showData(jsonData)
      })
    })
  </script>
</html>
